<template>
	<div class="pay">
		<div class="pay-step">
			<div class="step-bar">
				<div class="step-item" v-for="(v, i) in steps" :key="v.key" :class="{active: stepi >= i}">
					<div class="item-tail"></div>
					<div class="item-text">{{v.title}}</div>
					<div class="item-circle"></div>
				</div>
			</div>
		</div>
		<component :is="'pay-' + stepc" @next="next"></component>
	</div>
</template>

<script>
import paySelect from "@/views/master/pay-select";
import payConfirm from "@/views/master/pay-confirm";
import paySuccess from "@/views/master/pay-success";

export default {  
	components: {
		paySelect,
		payConfirm,
		paySuccess,
  },
  data() {
    return {
			steps: [
				{
					key: 'select',
					title: '选择项目',
				},
				{
					key: 'confirm',
					title: '确认订单',
				},
				{
					key: 'success',
					title: '完成支付',
				},
				{
					key: 'chat',
					title: '等待回复',
				},
			],
		};
	},
	computed: {
		stepi() {
			return this.$route.query.step * 1 || 0;
		},
		stepc() {
			return this.steps.find((v, i) => {
				return i == this.stepi;
			}).key;
		},
	},
	methods: {
		next(type = "push", query = {}) {
			this.$router[type]({
				name: 'pay',
				query: Object.assign({
					step: this.stepi + 1,
					id: this.$route.query.id,
				}, query)
			})
		}
	},
};
</script>

<style scoped lang="less">
.pay{
	min-height: 100vh;
	background-color: @bgColor;
}
.pay-step{
	.pl(100);
	.pr(100);
	background-color: #fff;
	.step-bar{
		.pt(40);
		.pb(40);
		display: flex;
		.step-item{
			flex: 1;
			position: relative;
			.item-text{
				.f26;
				text-align: center;
				.mb(40);
			}
			.item-circle{
				.w(20);
				.h(20);
				margin: 0 auto;
				background-color: #fff;
				border: 1px solid @primary;
				border-radius: 50%;
				position: relative;
				z-index: 1;
			}
			.item-tail{
				position: absolute;
				right: 50%;
				.px2rem(bottom, 10);
				width: 100%;
				border-top: 1px dashed #ccc;
			}
			&.active{
				.item-text{
					color: @primary;
				}
				.item-circle{
					background-color: @primary;
				}
				.item-tail{
					border-top-style: solid;
					border-top-color: @primary;
				}
			}
			&:first-child .item-tail{
				display: none;
			}
		}
	}
}
</style>
